<template>
	<view class="box">
		<!-- //- -->
		<mescroll-uni ref="mescrollRef" height='100%' @init="mescrollInit" @up="upCallback" :up="upOption"
			:down="{use: false}">
			<view class="box-c">
				<view class="box-top">
					<view class="top-padding">
						<view class="top-input">
							<view class="top-input-text">
								类型
							</view>
							<text class="top-input-shu"></text>
							<input class="top-input-inp" type="text" v-model="from.type" />
						</view>
						<view class="top-input">
							<view class="top-input-text">
								案例名称
							</view>
							<text class="top-input-shu"></text>
							<input class="top-input-inp" type="text" v-model="from.name" />
						</view>
						<view class="top-btn">
							<view class="action" @click="handleResetForm">
								<text>重</text>
								<text>置</text>
							</view>
							<view class="action search" @click="handleSearch">
								<text>查</text>
								<text>询</text>
							</view>
						</view>
					</view>
					<view class="top-text">
						<template v-for="item in text1">
							<view :key='item.id'>{{item.name}}</view>
						</template>

					</view>
					<view class="top-content" v-if="settlementList.length!==0" v-for="(god,indx) in settlementList">
						<view class="">
							{{god.id}}
						</view>
						<view class="">
							{{god.type}}
						</view>
						<view class="">
							{{god.name}}
						</view>
						<view class="" @click="goSettlement(god.id)">
							<u-button text="查看" color="#3c9cff" class="btn"></u-button>
						</view>
					</view>
					<view class="top-kong" v-if="settlementList.length<=0">
						<image style="width: 300rpx;height: 300rpx;"
							src="https://www.mescroll.com/img/mescroll-empty.png" mode=""></image>
						<view class="">
							~空空如也~
						</view>
					</view>
				</view>
			</view>
		</mescroll-uni>
	</view>
</template>

<script>
	import {
		SettlementCaseList
	} from '@/api/patrol.js';
	export default {
		data() {
			return {
				mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
				upOption: {
					textNoMore: '-- 没有更多了 --'
				},
				from: {
					name: '',
					type: ''
				},
				text1: [{
					id: 1,
					name: '序号'
				}, {
					id: 2,
					name: '类型'
				}, {
					id: 3,
					name: '案例名称'
				}, {
					id: 4,
					name: '操作'
				}],
				pageSize: 20,
				settlementList: []
			}
		},
		methods: {
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			async upCallback(page) {
				const {
					data
				} = await SettlementCaseList({
					...this.from,
					page: page.num,
					pageSize: this.pageSize
				});
				if (data.data == '') {
					this.settlementList = []
				}
				if (data.code === 1 || data.code === 200) {
					let curPageData = data.data.data;
					// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
					let curPageLen = curPageData.length;
					// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
					let totalPage = data.data.last_page;
					//设置列表数据
					if (page.num == 1) this.settlementList = []; //如果是第一页需手动置空列表
					this.settlementList = this.settlementList.concat(curPageData); //追加新数据
					// 请求成功,隐藏加载状态
					//方法一(推荐): 后台接口有返回列表的总页数 totalPage
					this.mescroll.endByPage(curPageLen, totalPage);
					// setTimeout(()=>{
						// this.mescroll.endSuccess(curPageLen)
					// },20)
				} else {
					//  请求失败,隐藏加载状态
					this.mescroll.endErr()
				}
				uni.hideLoading()
			},


			handleResetForm() { //重置
				this.from.type = ''
				this.from.name = ''
				this.mescroll.resetUpScroll();
				this.mescroll.scrollTo(0, 0);
			},
			handleSearch() { //查询
				uni.showLoading({
					title: '加载中'
				})
				this.mescroll.resetUpScroll();
				this.mescroll.scrollTo(0, 0);
			},
			goSettlement(item) {
				uni.navigateTo({
					url: '/pages/statistics/manufacture/settlement-details/settlement-details?id=' + item
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 100%;
		height: 100rpx;
		background-color: #2658FA;
		font-size: 13px;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 1px;
		color: #3b3c40;

		.box-c {
			border-top-left-radius: 50rpx;
			border-top-right-radius: 50rpx;
			background-color: #fff;
		}
	}

	.top-kong {
		width: 100%;
		margin-top: 30rpx;
		padding-top: 100rpx;
		text-align: center;
		color: #3b3c40;
		border-top: 2rpx solid #D5E5F4;
	}

	.box-top {
		padding: 40rpx 40rpx 0rpx 40rpx;

		.top-padding {
			padding: 0rpx 10rpx;

			.top-input {
				height: 50rpx;
				line-height: 50rpx;
				margin-bottom: 30rpx;
				border: 3rpx solid #2D5DFE;
				border-radius: 50rpx;
				display: flex;

				.top-input-text {
					width: 150rpx;
					text-align: center;
					font-size: 26rpx;
					color: #0535D6;
					font-family: Source Han Sans CN;
					font-weight: 500;
				}

				.top-input-shu {
					display: inline-block;
					width: 2rpx;
					height: 35rpx;
					line-height: 35rpx;
					margin-top: 8rpx;
					background-color: #7899B0;
				}

				.top-input-inp {
					height: 50rpx;
					line-height: 50rpx;
					padding-left: 20rpx;
					font-size: 26rpx;
				}
			}

			.top-btn {
				margin-bottom: 30rpx;
				display: flex;
				justify-content: space-between;

				.action {
					width: 288rpx;
					height: 48rpx;
					background-color: #395cf5;
					border-radius: 20rpx;
					text-align: center;
					line-height: 48rpx;
					font-size: 26rpx;
					font-weight: normal;
					font-stretch: normal;
					color: #ffffff;

					text {
						&:first-child {
							margin-right: 20rpx;
						}
					}
				}

				.search {
					background-color: #1534ce;
				}
			}
		}




		.top-text {
			width: 100%;
			height: 50rpx;
			display: flex;
			justify-content: space-between;
			font-weight: bold;
			color: #3b3c40;

			view {
				padding: 0rpx 20rpx;

				&:nth-child(2) {
					margin-left: -30rpx;
				}

				&:nth-child(3) {
					margin-left: 25rpx;
				}
					&:nth-child(4) {
				margin-right: 15rpx;
				}
			}
		}

		.top-content {
			width: 100%;
			height: 112rpx;
			line-height: 112rpx;
			display: flex;
			justify-content: space-between;
			font-size: 26rpx;
			font-family: SourceHanSansCN-Bold;
			letter-spacing: 2rpx;
			border-top: 2rpx solid #D5E5F4;
			view {
				padding: 0rpx 20rpx;

				&:nth-child(1) {
					flex: 10%;
					text-align: center;
				}

				&:nth-child(2) {
					flex: 30%;
					text-align: center;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				&:nth-child(3) {
					margin-top: 5rpx;
					height: 100rpx;
					line-height: 50rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					flex: 40%;
				}
				.btn{
					flex: 15%;
					text-align: right;
					height: 24px;
					background-color: #395cf5;
					border-radius: 10px;
					text-align: center;
					line-height: 24px;
					font-size: 13px;
					font-weight: normal;
					font-stretch: normal;
					color: #ffffff;
					margin-top: 16px;
					margin-left: 10px;
				}
				&:nth-child(4) {
					flex: 15%;
					text-align: right;
				}
			}
		}
	}
</style>
